<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-08 21:24:06
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-09 11:15:29
 * @Description: 
-->
<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item v-for="item in article.breadcrumb" :key="item">{{
        item
      }}</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="article-content">
      <h1>{{ article.title }}</h1>
      <UserCard datetime="2022-09-08 21:24:06" />

      <a-divider></a-divider>
      <h2>样例：</h2>
      <a-rate/>
      <a-divider></a-divider>

      <h2>实现：</h2>
      <!-- 组件 -->
      <h3>普通</h3>
      <lzk-rate></lzk-rate><br>
      <pre><code class='language-HTML line-numbers'>{{code1}}</code></pre>

      <h3>数据绑定</h3>
      <lzk-rate v-model="value"/>
      <input type="number" v-model="value">
      <br>
      <pre><code class='language-HTML line-numbers'>{{code2}}</code></pre>
      <h3>默认值：</h3>
      <lzk-rate :default-value="2"/><br>
      <pre><code class='language-HTML line-numbers'>{{code3}}</code></pre>

      <h3>自定义 数量</h3>
      <lzk-rate :count="10" :default-value="2"/> <br>
      <pre><code class='language-HTML line-numbers'>{{code4}}</code></pre>

      <h3>自定义 文本</h3>
      <lzk-rate :texts="['很不好','不好','还行','好','很好']" :default-value="2"/><br> 
      <pre><code class='language-HTML line-numbers'>{{code5}}</code></pre>

      <h3>自定义 图标</h3>
      <lzk-rate :default-value="2">
        <template #character>
          <icon-heart-fill />
        </template>
      </lzk-rate><br>
      <pre><code class='language-HTML line-numbers'>{{code6}}</code></pre>

      <h3>自定义 颜色</h3>
      <lzk-rate :default-value="2" color="red" /> <br>
      <pre><code class='language-HTML line-numbers'>{{code7}}</code></pre>

      <h3>只读</h3>
      <lzk-rate :default-value="2" readonly /><br>
      <pre><code class='language-HTML line-numbers'>{{code8}}</code></pre>

      <h3>禁用</h3>
      <lzk-rate disabled></lzk-rate><br>
      <pre><code class='language-HTML line-numbers'>{{code9}}</code></pre>

      <a-divider></a-divider>
      <h2>lzk-rate 组件代码</h2>
      <h3>HTML部分：</h3>
      <pre><code class='language-HTML line-numbers'>{{code10}}</code></pre>
      <h3>JavaScript部分：</h3>
      <pre><code class='language-javascript line-numbers'>{{code11}}</code></pre>
      <h3>CSS部分：</h3>
      <pre><code class='language-CSS line-numbers'>{{code12}}</code></pre>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive,onMounted } from "vue";
import UserCard from "@/components/UserCard.vue";
import LzkRate from "@/components/test/LzkRate.vue";
import Prism from "prismjs";

onMounted(() => {
  Prism.highlightAll();
});

const value = ref(1)

const article = {
  breadcrumb: ["Vue练习", "Star Slider"],
  title: "⭐⭐⭐ Star Slider ⭐⭐⭐",
};

const code1 = `<template>
  <lzk-rate />
</template>`
const code2 = `<template>
  <lzk-rate v-model="value" />
</template>`
const code3 = `<template>
  <lzk-rate :default-value="2"/>
</template>`
const code4 = `<template>
  <lzk-rate :count="10" :default-value="2"/> 
</template>`
const code5 = `<template>
  <lzk-rate :texts="['很不好','不好','还行','好','很好']" :default-value="2"/> 
</template>`
const code6 = `<template>
  <lzk-rate :default-value="2">
    <template #character>
      <icon-heart-fill />
    </template>
  </lzk-rate>
</template>`
const code7 = `<template>
  <lzk-rate :default-value="2" color="red" /> 
</template>`
const code8 = `<template>
  <lzk-rate :default-value="2" readonly />
</template>`
const code9 = `<template>
  <lzk-rate disabled />
</template>`
const code10 = `<template>
  <div ref="rateSlider">
    <span
      v-for="item in stars"
      :key="item"
      class="default"
      :style="{
        cursor: props.disabled
          ? 'no-drop'
          : props.readonly
          ? 'auto'
          : 'pointer',
      }"
      :class="{ active: item <= curValue }"
      @mouseenter="onMouseenter(item)"
      @mouseleave="onMouseleave()"
      @click="onClick(item)"
    >
      <slot name="character"><icon-star-fill /></slot>
    </span>
    <span>{{ defaultText[textValue] }}</span>
  </div>
</template>`
const code11 = `<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";

const props = defineProps({
  //默认值
  defaultValue: {
    type: Number,
    default: 0,
  },
  //星星个数
  count: {
    type: Number,
    default: 5,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  color: {
    type: String,
    default: "#f7ba1e",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Number,
  },
  texts:{
    type:Number,
    default:["😖垃圾", "🙁不满意", "😐凑合", "🙂还行", "😁牛逼"]
  }
});

const emit = defineEmits(["update:modelValue"]);

// 监听评分 value 是否越界
watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue > props.count) {
      Message.warning("已达到评分最大值!");
      emit("update:modelValue", props.count);
      return;
    }
    if (newValue < 1) {
      Message.warning("已达到评分最小值!");
      emit("update:modelValue", 1);
      return;
    }
    curValue.value = newValue;
  }
);

const curValue = ref(props.modelValue || props.defaultValue);

let preValue = 0;
const rateSlider = ref(null);
const defaultText = props.texts;

// 初始化颜色
onMounted(() => {
  rateSlider.value.style.setProperty("--rate-color", props.color);
});

const textValue = computed(() => {
  return (
    Math.ceil(curValue.value / Math.round(props.count / defaultText.length)) - 1
  );
});

const stars = ref(Array.from({ length: props.count }, (_, i) => 1 + i));

const onMouseenter = (num) => {
  if (props.readonly || props.disabled) return;
  preValue = curValue.value;
  curValue.value = num;
};
const onMouseleave = () => {
  if (props.readonly || props.disabled) return;
  curValue.value = preValue;
};

const onClick = (num) => {
  if (props.readonly || props.disabled) return;
  preValue = num;
  emit("update:modelValue", num);
};
\<\/script\>`
const code12 = `<style lang='less' scoped>
.default {
  font-size: 25px;
  color: var(--color-neutral-3);
  padding-right: 7px;
  svg {
    transition: transform 0.1s ease-out;
  }
  &:hover {
    svg {
      transform: scale(1.2);
    }
  }
  &.active {
    color: var(--rate-color);
  }
}
</style>`

</script>

<style lang='less' scoped>
</style>

